<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>搜索</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <style>
        audio {
            width: 700px;
            height: auto;
            margin: 10px auto;
            background-color: white;
            filter: alpha(opacity:30);
            opacity: 0.6;
        }

        #play {
            width: 800px;
            margin: auto auto;
        }

        #table {
            width: 900px;
            margin: 10px auto;
        }

        #searchtable {
            width: 900px;
            margin: 10px auto;
        }

        .playBtn {
            width: 20px;
            height: 20px;
        }
        #namespace{
            margin-left: 50px;
        }
    </style>
</head>
<body>
<span id="namespace">
    欢迎您：<a href="#" id="name"></a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a onclick="out()" >退出</a>
</span>
<hr>
<div id="searchtable">
    <div class="col-lg-6">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="输入歌曲名/歌手名/专辑名以查找" id="searchcontent">
            <span class="input-group-btn">
        <button class="btn btn-default" type="button" id="search">查找</button>
      </span>
        </div><!-- /input-group -->
    </div><!-- /.col-lg-6 -->
</div>


<table id="table" class="table table-striped  .table-hover">
    <thead>
    <tr>
        <td>歌曲名</td>
        <td>演唱者</td>
        <td>专辑</td>
        <td>试听</td>
        <td>下载</td>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<div id="play">
    <audio controls="controls" id="player">
        您的浏览器版本过低，请升级浏览器或更换浏览器尝试
    </audio>
</div>
<script src="../js/jquery-3.2.1.js"></script>
<script>

</script>
</body>
</html>